﻿<html style="height: 100%; overflow: hidden;">
<head>
    <title>About Us</title>
    <link rel="stylesheet" type="text/css" href="/Scripts/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/Scripts/themes/icon.css">
    <script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#tabControl').tabs({
                tools: [{
                    iconCls: 'icon-add',
                    handler: function () {
                        alert('add');
                    }
                }, {
                    iconCls: 'icon-save',
                    handler: function () {
                        alert('save');
                    }
                }]
            });
        });

        function createFrame(url) {
            var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            return s;
        }
        var index = 0;
        //        function addTab() {
        //            index++;
        //            var tab = $('#tabControl').tabs('add', {
        //                title: 'New Tab ' + index,
        //                content: 'Tab Body ' + index,
        //                iconCls: 'icon-save',
        //                closable: true
        //            });
        //            alert(tab);
        //        }

        function addTab(subtitle, url) {
            if (!$('#tabControl').tabs('exists', subtitle)) {
                $('#tabControl').tabs('add', {
                    title: subtitle,
                    content: createFrame(url),
                    closable: true,
                    width: $('#mainPanle').width() - 10,
                    height: $('#mainPanle').height() - 26
                });
            } else {
                $('#tabs').tabs('select', subtitle);
            }
            //tabClose();
        }

        function addTabWithContent(subtitle, url) {
            var tab = null;
            if (!$('#tabControl').tabs('exists', subtitle)) {
                tab = $('#tabControl').tabs('add', {
                    title: subtitle,
                    content: "<table id='tblIndustry'></table>",
                    closable: true,
                    width: $('#mainPanle').width() - 10,
                    height: $('#mainPanle').height() - 26
                });
            } else {
                $('#tabControl').tabs('select', subtitle);
            }
            //tabClose();
            //alert($("#tabControl").children().last().html());
            //alert($('#tblIndustry'));
            $('#tblIndustry').datagrid({
                title: subtitle,
                iconCls: 'icon-save',
                width: 800,
                height: 650,
                nowrap: false,
                striped: true,
                collapsible: true,
                url: url,
                sortName: 'ID',
                sortOrder: 'desc',
                remoteSort: false,
                idField: 'ID',
                frozenColumns: [[
	                { field: 'ck', checkbox: true },
	                { field: 'ID', title: 'code', width: 80, sortable: true }
				]],
                columns: [[
			        { title: 'Base Information', colspan: 3 },
					{ field: 'opt', title: 'Operation', width: 100, align: 'center', rowspan: 2,
					    formatter: function (value, rec) {
					        return '<span style="color:red">Edit Delete</span>';
					    }
					}
				], [
					{ field: 'Name', title: 'Name', width: 120 },
					{ field: 'InstitutionCode', title: 'Address', width: 120, rowspan: 2, sortable: true,
					    sorter: function (a, b) {
					        return (a > b ? 1 : -1);
					    }
					},
					{ field: 'QueryCode', title: 'Col41', width: 150, rowspan: 2 }
				]],
                pagination: true,
                rownumbers: true,
                toolbar: [{
                    id: 'btnadd',
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('add')
                    }
                }, {
                    id: 'btncut',
                    text: 'Cut',
                    iconCls: 'icon-cut',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('cut')
                    }
                }, '-', {
                    id: 'btnsave',
                    text: 'Save',
                    disabled: true,
                    iconCls: 'icon-save',
                    handler: function () {
                        $('#btnsave').linkbutton('disable');
                        alert('save')
                    }
                }]
            });
            var p = $('#tblIndustry').datagrid('getPager');
            if (p) {
                $(p).pagination({
                    onBeforeRefresh: function () {
                        alert('before refresh');
                    }
                });
            }

        }


        $(function () {

            //setInterval(ajaxRequest, 1000);
            //            $.ajax({
            //                type: "GET",
            //                url: '<%= Url.Action("SleepFor2Seconds", "Home") %>',
            //                data: "{}",
            //                cache: false,
            //                beforeSend: showProgressDialog,
            //                complete: hideProgressDialog
            //            });
        });
        function ajaxRequest() {
            $.ajax({
                url: '/TopDemo/Home/ErrorRefresh',      // 指定调用的URL，对应于Controller  
                data: '{}',                             // 如果请求有参数，需要在这里指定  
                type: "POST",                           // 请求类型  
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (data) {              // 请求成功后的回调  
                    if (data == null || data.length == 0) {
                        return false;
                    } else {
                        writeMsg(data);
                    }
                },
                error: function (data) {                // 请求失败后的回调  
                    alert(data.statusText);
                }
            });
        }

        function writeMsg(data) {
            var errorDiv = document.getElementById("errorDiv");
            for (var i = 0; i < data.length; i++) {
                var errorText = document.createTextNode(data[i].errMsg);
                var errorTextDiv = document.createElement("div");
                errorTextDiv.appendChild(errorText);
                if (errorDiv.hasChildNodes) {
                    errorDiv.insertBefore(errorTextDiv, errorDiv.firstChild);
                } else {
                    errorDiv.appendChild(errorTextDiv);
                }
            }
        }
        function getHtml(dom) {
            var log = document.getElementById("TraceConsole");
            if (typeof (dom) === "undefined" || dom === null) {
                log.value = document.documentElement.outerHTML;
            }
            else {
                log.value = document.getElementById(dom).outerHTML;
            }
            log.parentNode.style.display = "block";
        }

        function addTab1(subtitle) {
            var tab = null;
            if (!$('#tabControl').tabs('exists', subtitle)) {
                tab = $('#tabControl').tabs('add', {
                    title: subtitle,
                    content: "<form id=\"form2\"><div id=\"logRegion\" style=\"display: none;\"><textarea id=\"TraceConsole\" rows=\"100\" cols=\"160\"></textarea><a id=\"btnHide\" href=\"javascript:void();\" onclick=\"this.parentNode.style.display = 'none';\">隐藏</a>    </div>    </form>",
                    closable: true,
                    width: $('#mainPanle').width() - 10,
                    height: $('#mainPanle').height() - 26
                });
            } else {
                $('#tabControl').tabs('select', subtitle);
            }

            getHtml();
        }
    </script>
</head>
<body style="margin: 0px; padding: 0px; border: currentColor; height: 100%; overflow: hidden;"
    class="easyui-layout layout">
    <div style="width: 150px;" id="mymenu">
        <div>
            item1</div>
        <div>
            item2</div>
    </div>
    <div style="left: 0px; top: 0px; width: 1420px; cursor: s-resize;" class="panel layout-panel layout-panel-north layout-split-north">
        <div style="width: 1408px;" class="panel-header">
            <div class="panel-title">
                North Title</div>
            <div class="panel-tool">
                <div class="layout-button-up">
                </div>
            </div>
        </div>
        <div style="padding: 10px; width: 1398px; height: 47px;" id="northPanel" class="layout-body panel-body"
            title="" split="true" region="north">
            <p>
                [ <a href="/Account/LogOn">Log On</a> ]
            </p>
            <p>
                n1</p>
            <p>
                n2</p>
            <p>
                n3</p>
            <p>
                n4</p>
            <p>
                n5</p>
        </div>
    </div>
    <div style="left: 0px; top: 694px; width: 1420px; cursor: n-resize;" class="panel layout-panel layout-panel-south layout-split-south">
        <div style="width: 1408px;" class="panel-header">
            <div class="panel-title">
                South Title</div>
            <div class="panel-tool">
                <div class="layout-button-down">
                </div>
            </div>
        </div>
        <div style="background: rgb(239, 239, 239); padding: 10px; width: 1398px; height: 47px;"
            id="southPanel" class="layout-body panel-body" title="" split="true" region="south">
            <div style="background: rgb(204, 204, 204); margin: 0px; padding: 0px; width: 1398px;
                height: 47px;" class="easyui-layout layout" fit="true">
                <div style="left: 0px; top: 0px; width: 1198px;" class="panel layout-panel layout-panel-center">
                    <div style="width: 1196px; height: 45px;" class="layout-body panel-body panel-body-noheader"
                        title="" region="center">
                        sub center</div>
                </div>
                <div style="left: 1198px; top: 0px; width: 195px; cursor: default;" class="panel layout-panel layout-panel-east layout-split-east">
                    <div style="width: 193px; height: 45px;" class="layout-body panel-body panel-body-noheader"
                        title="" split="true" region="east">
                        sub center</div>
                </div>
                <div class="layout-split-proxy-h">
                </div>
                <div class="layout-split-proxy-v">
                </div>
            </div>
        </div>
    </div>
    <div style="left: 1240px; top: 100px; width: 175px; cursor: default;" class="panel layout-panel layout-panel-east layout-split-east">
        <div style="width: 163px;" class="panel-header">
            <div class="panel-title panel-with-icon">
                Tree Menu</div>
            <div class="panel-icon icon-reload">
            </div>
            <div class="panel-tool">
                <div class="layout-button-right">
                </div>
            </div>
        </div>
        <div style="width: 173px; height: 566px;" id="eastPanel" class="layout-body panel-body"
            title="" split="true" region="east" iconcls="icon-reload">
            <ul class="easyui-tree tree" url="tree_data.json">
            </ul>
        </div>
    </div>
    <div style="left: 0px; top: 100px; width: 275px; cursor: default;" class="panel layout-panel layout-panel-west layout-split-west">
        <div style="width: 263px;" class="panel-header">
            <div class="panel-title">
                West Menu</div>
            <div class="panel-tool">
                <div class="layout-button-left">
                </div>
            </div>
        </div>
        <div style="padding: 1px; width: 271px; height: 564px; overflow: hidden;" id="westPanel"
            class="layout-body panel-body" title="" split="true" region="west">
            <div style="width: 271px; height: 564px;" class="easyui-accordion accordion accordion-noborder"
                fit="true" border="false">
                <div style="width: 271px;" class="panel">
                    <div style="width: 261px; height: 15px;" class="panel-header accordion-header accordion-header-selected">
                        <div class="panel-title">
                            Title1</div>
                        <div class="panel-tool">
                            <div class="accordion-collapse">
                            </div>
                        </div>
                    </div>
                    <div style="width: 271px; height: 486px; overflow: auto;" class="panel-body accordion-body"
                        title="" selected="true">
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a onclick="addTab('TabTitle', '/Database')" href="javascript:void(0);">超链接显示的文字</a></li>
                            <li><a onclick="addTabWithContent('获取数据', '/Database/Industry')" href="javascript:void(0);">
                                获取数据</a></li>
                            <li><a onclick="addTab('产生脚本', '/Database/GenerateSQL')" href="javascript:void(0);">
                                产生脚本</a></li>
                            <li><a onclick="addTab1('fff')" href="javascript:void(0);">网页源码</a></li>
                        </ul>
                        <p>
                            content1</p>
                        <p>
                            content1</p>
                        <p>
                            content12</p>
                    </div>
                </div>
                <div style="width: 271px;" class="panel">
                    <div style="width: 261px; height: 15px;" class="panel-header accordion-header">
                        <div class="panel-title">
                            Title2</div>
                        <div class="panel-tool">
                            <div class="accordion-collapse accordion-expand">
                            </div>
                        </div>
                    </div>
                    <div style="padding: 10px; width: 251px; height: 466px; display: none;" class="panel-body accordion-body"
                        title="">
                        content2 <a onclick="addmenu()" href="#">addmenu</a>
                    </div>
                </div>
                <div style="width: 271px;" class="panel">
                    <div style="width: 261px; height: 15px;" class="panel-header accordion-header">
                        <div class="panel-title">
                            Title3</div>
                        <div class="panel-tool">
                            <div class="accordion-collapse accordion-expand">
                            </div>
                        </div>
                    </div>
                    <div style="width: 271px; height: 486px; display: none;" class="panel-body accordion-body"
                        title="">
                        content3
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="left: 280px; top: 100px; width: 960px;" class="panel layout-panel layout-panel-center">
        <div style="width: 948px;" class="panel-header">
            <div class="panel-title">
                Main Title</div>
            <div class="panel-tool">
                <div>
                </div>
            </div>
        </div>
        <div style="width: 958px; height: 566px; overflow: hidden;" id="mainPanle" class="layout-body panel-body"
            title="" region="center">
            <div style="width: 958px; height: 566px;" id="tabControl" class="easyui-tabs tabs-container"
                fit="true" border="false">
                <div style="width: 958px;" class="tabs-header tabs-header-noborder">
                    <div style="display: none;" class="tabs-scroller-left">
                    </div>
                    <div style="display: none;" class="tabs-scroller-right">
                    </div>
                    <div style="left: 0px; width: 898px; margin-right: 60px; margin-left: 0px;" class="tabs-wrap">
                        <ul class="tabs">
                            <li><a class="tabs-inner" href="javascript:void(0)"><span class="tabs-title">Tab1</span><span
                                class="tabs-icon"></span></a></li><li><a class="tabs-inner" href="javascript:void(0)">
                                    <span class="tabs-title tabs-closable">Tab2</span><span class="tabs-icon"></span></a><a
                                        class="tabs-close" href="javascript:void(0)"></a></li><li><a class="tabs-inner" href="javascript:void(0)">
                                            <span class="tabs-title tabs-closable tabs-with-icon">Tab3</span><span class="tabs-icon icon-reload"></span></a><a
                                                class="tabs-close" href="javascript:void(0)"></a></li><li class="tabs-selected"><a
                                                    class="tabs-inner" href="javascript:void(0)"><span class="tabs-title tabs-closable">
                                                        fff</span><span class="tabs-icon"></span></a><a class="tabs-close" href="javascript:void(0)"></a></li></ul>
                    </div>
                    <div style="height: 25px; right: 0px;" class="tabs-tool">
                        <a class="l-btn l-btn-plain" href="javascript:void(0);"><span class="l-btn-left"><span
                            class="l-btn-text"><span class="l-btn-empty icon-add">&nbsp;</span></span></span></a><a
                                class="l-btn l-btn-plain" href="javascript:void(0);"><span class="l-btn-left"><span
                                    class="l-btn-text"><span class="l-btn-empty icon-save">&nbsp;</span></span></span></a></div>
                </div>
                <div style="width: 958px; height: 537px;" class="tabs-panels tabs-panels-noborder">
                    <div style="width: 958px; display: none;" class="panel">
                        <div style="padding: 20px; width: 918px; height: 497px; overflow: hidden;" class="panel-body panel-body-noheader panel-body-noborder"
                            title="">
                            <div style="margin-top: 20px;">
                                <h2>
                                    About</h2>
                                <p>
                                    Put content here.
                                </p>
                                <h3>
                                    jQuery EasyUI framework help you build your web page easily.</h3>
                                <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                                <li>using easyui you don't write many javascript code, instead you defines user-interface
                                    by writing some HTML markup.</li>
                                <li>easyui is very easy but powerful.</li>
                            </div>
                        </div>
                    </div>
                    <div style="display: none;" class="panel">
                        <div style="padding: 20px;" class="panel-body panel-body-noheader panel-body-noborder"
                            title="" closable="true">
                            This is Tab2 width close button.</div>
                    </div>
                    <div style="display: none;" class="panel">
                        <div style="padding: 5px; overflow: hidden;" class="panel-body panel-body-noheader panel-body-noborder"
                            title="" closable="true" icon="icon-reload">
                            <table id="tt2">
                            </table>
                        </div>
                    </div>
                    <div style="width: 958px; display: block;" class="panel">
                        <div style="width: 958px; height: 537px;" class="panel-body panel-body-noheader panel-body-noborder"
                            title="">
                            <form id="form2">
                            <div style="display: none;" id="logRegion">
                                <textarea id="TraceConsole" cols="160" rows="100"></textarea><a id="btnHide" onclick="this.parentNode.style.display = 'none';"
                                    href="javascript:void();">隐藏</a>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layout-split-proxy-h">
    </div>
    <div class="layout-split-proxy-v">
    </div>
</body>
</html>
